<!DOCTYPE html>
<html>
<head>
<title>Grid Layout</title>
  <meta name="description" content="Interactive demonstration of layout-on-a-grid features by the GridLayout class." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // must be the ID or reference to div
        {
          layout: $(go.GridLayout,
                    { comparer: go.GridLayout.smartComparer })
                    // other properties are set by the layout function, defined below
        });

    // define the Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        // make sure the Node.location is different from the Node.position
        { locationSpot: go.Spot.Center },
        new go.Binding("text", "text"),  // for sorting
        $(go.Shape, "Ellipse",
          { fill: "lightgray",
            stroke: "black",
            desiredSize: new go.Size(30, 30) },
          new go.Binding("fill", "fill"),
          new go.Binding("desiredSize", "size")),
        $(go.TextBlock,
          // the default alignment is go.Spot.Center
          new go.Binding("text", "text"))
      );

    // create an array of data describing randomly colored and sized nodes
    var nodeDataArray = [];
    for (var i = 0; i < 100; i++) {
      nodeDataArray.push({
        key: i,
        text: i.toString(),
        fill: go.Brush.randomColor(),
        size: new go.Size(30+Math.floor(Math.random()*50), 30+Math.floor(Math.random()*50))
      });
    }

    // randomize the data
    for (i = 0; i < nodeDataArray.length; i++) {
      var swap = Math.floor(Math.random() * nodeDataArray.length);
      var temp = nodeDataArray[swap];
      nodeDataArray[swap] = nodeDataArray[i];
      nodeDataArray[i] = temp;
    }

    // create a Model that does not know about link or group relationships
    myDiagram.model = new go.Model(nodeDataArray);

    // layout using the latest parameters
    layout();
  }

  // Update the layout from the controls, and then perform the layout again
  function layout() {
    myDiagram.startTransaction("change Layout");
    var lay = myDiagram.layout;

    var wrappingColumn = document.getElementById("wrappingColumn").value;
    lay.wrappingColumn = parseFloat(wrappingColumn, 10);

    var wrappingWidth = document.getElementById("wrappingWidth").value;
    lay.wrappingWidth = parseFloat(wrappingWidth, 10);

    var cellSize = document.getElementById("cellSize").value;
    lay.cellSize = go.Size.parse(cellSize);

    var spacing = document.getElementById("spacing").value;
    lay.spacing = go.Size.parse(spacing);

    var alignment = getRadioValue("alignment");
    if (alignment === "Position") {
      lay.alignment = go.GridLayout.Position;
    } else {
      lay.alignment = go.GridLayout.Location;
    }

    var arrangement = getRadioValue("arrangement");
    if (arrangement === "LeftToRight") {
      lay.arrangement = go.GridLayout.LeftToRight;
    } else {
      lay.arrangement = go.GridLayout.RightToLeft;
    }

    var sorting = document.getElementById("sorting").value;
    switch (sorting) {
      default:
      case "Forward": lay.sorting = go.GridLayout.Forward; break;
      case "Reverse": lay.sorting = go.GridLayout.Reverse; break;
      case "Ascending": lay.sorting = go.GridLayout.Ascending; break;
      case "Descending": lay.sorting = go.GridLayout.Descending; break;
    }

    myDiagram.commitTransaction("change Layout");
  }

  function getRadioValue(name) {
    var radio = document.getElementsByName(name);
    for (var i = 0; i < radio.length; i++) {
      if (radio[i].checked) return radio[i].value;
    }
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div style="margin-bottom: 5px; padding: 5px; background-color: aliceblue">
    <span style="display: inline-block; vertical-align: top; padding: 5px">
      <b>GridLayout Properties</b>
      <br />
      Wrapping Column:
      <input type="text" size="3" id="wrappingColumn" value="NaN" onchange="layout()" />
      (NaN means there's no limit)
      <br />
      Wrapping Width:
      <input type="text" size="3" id="wrappingWidth" value="NaN" onchange="layout()" />
      (NaN means use the diagram's viewport width)
      <br />
      Cell Size:
      <input type="text" size="6" id="cellSize" value="NaN NaN" onchange="layout()" />
      (NaN x NaN means use a cell size big enough to hold any node)
      <br />
      Spacing:
      <input type="text" size="6" id="spacing" value="10 10" onchange="layout()" />
      (the minimum space between the nodes)
      <br />
      Alignment:
      <input type="radio" name="alignment" onclick="layout()" value="Position" /> Position
      <input type="radio" name="alignment" onclick="layout()" value="Location" checked="checked" /> Location
      <br />
      Arrangement:
      <input type="radio" name="arrangement" onclick="layout()" value="LeftToRight" checked="checked" /> LeftToRight
      <input type="radio" name="arrangement" onclick="layout()" value="RightToLeft" /> RightToLeft
      <br />
      Sorting:
      <select name="sorting" id="sorting" onchange="layout()">
        <option value="Forward" selected="selected">Forward</option>
        <option value="Reverse">Reverse</option>
        <option value="Ascending">Ascending</option>
        <option value="Descending">Descending</option>
      </select>
    </span>
  </div>
  <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 500px"></div>
</div>
</body>
</html>